<template>
  <div class="img-list-box">
    <template v-if="list.length > 0">
      <div
        class="img-item"
        v-for="(item, index) in list"
        :key="index"
        @click="seedetail(item)"
      >
        <img class="img" :src="item.eventPic" />
        <p class="title">
          <span class="name">{{ item.eventCodeDesc }}</span>

          <span class="level l1" v-if="item.eventClassDesc === '普通'">{{
            item.eventClassDesc
          }}</span>
          <span class="level l3" v-else-if="item.eventClassDesc === '紧急'">{{
            item.eventClassDesc
          }}</span>
          <span class="level l2" v-else>{{ item.eventClassDesc || "--" }}</span>
        </p>
        <p class="text">时间：{{ item.reportTime }}</p>
        <p class="text">地址：{{ item.address }}</p>
      </div>
    </template>
    <template v-else>
      <div class="empty">
        <img src="@/assets/images/empty.png" />
        <p>暂无数据</p>
      </div>
    </template>
  </div>
</template>

<script setup>
import { TabbarList } from "@/pinia/tabbar.js";
let piniaTab = TabbarList();
const props = defineProps({
  list: {
    type: Array,
    required: true,
  },
});

const seedetail = (row) => {
  console.log("sssssssssss", row);
  piniaTab.add({
    name: "事件详情",
    path: "/ypdetail",
    icon: "",
    query: {
      busizEventId: row.id,
    },
    meta: {
      hidden: false,
      title: "",
    },
  });
};
</script>

<style lang="scss" scoped>
.img-list-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: top;
  // justify-content: space-between;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px 45px;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
  border-radius: 12px;
  overflow: auto;
  .img-item {
    width: 300px;
    // width: 290px;
    height: 260px;
    background: rgba(142, 191, 255, 0.15);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    .img {
      width: 100%;
      height: 152px;
    }
    .title {
      margin-bottom: 10px;
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }
      .level {
        width: 42px;
        height: 20px;
        background: #ffd2d2;
        border-radius: 4px;
        text-align: center;
        line-height: 18px;
        font-family: PingFangSC, PingFang SC;
        font-size: 12px;
        &.l1 {
          color: #45aff7;
          background: #d2f0ff;
          border: 1px solid #a5dcff;
        }
        &.l2 {
          color: #ff982b;
          background: #ffe9d2;

          border: 1px solid #ffbe7c;
        }
        &.l3 {
          color: #da5a5a;
          border: 1px solid #ffa5a5;
          background: #ffd2d2;
        }
      }
    }
    .text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 20px;
    }
  }
  .empty {
    width: 174px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #666666;
  }
}
</style>
